<template>
  <Modal
    v-model:active="wrapperModalVueActive"
    hide-mask
    draggable
    :mask-close="false"
    transfer
    title="包面网格"
    :width="480"
    confirm-text="网格剖分"
    @confirm="setWrapperMesh"
  >
    <ConfigProvider :props="providedProps">
      <Form :model="formModel" style="padding: 24px">
        <Row align="middle" justify="start" :gap="[8]">
          <Column :span="24">
            <div class="title">
              <div class="title_color"></div>
              <div class="title_content">选择器</div>
            </div>
          </Column>
        </Row>
        <Column :span="18" :offset="6">
          <FormItem label="类型:">
            <Select
              :options="GeomSelectTypeOptions"
              v-model:value="elementType"
              @select="typeSelect"
            ></Select>
          </FormItem>
        </Column>
        <Row align="middle" justify="start" :gap="[8]">
          <Column :span="24">
            <div class="title">
              <div class="title_color"></div>
              <div class="title_content">参数</div>
            </div>
          </Column>
        </Row>
        <Column :span="18" :offset="6">
          <FormItem label="尺寸:">
            <Input
              v-model:value="formModel.surfCtrl.surfaceMesh.meshSize"
              clearable
            ></Input>
          </FormItem>
          <FormItem label="精度:">
            <Input
              v-model:value="formModel.surfCtrl.surfaceMesh.meshSizeMin"
              clearable
            ></Input>
          </FormItem>
        </Column>
        <Column :span="18" :offset="6">
          <Checkbox v-model:checked="innerShell" @change="innerShellChange"
            >内向包面</Checkbox
          >
          <Checkbox
            v-model:checked="autoFeatureDetect"
            @change="autoFeatureDetectChange"
            >自动特征检测</Checkbox
          >
        </Column>
      </Form>
    </ConfigProvider>
  </Modal>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import {
  Modal,
  Input,
  Select,
  Divider,
  Form,
  FormItem,
  ConfigProvider,
  Checkbox,
  Row,
  Column,
  Button,
  Toast,
} from "cax-ui";
import { storeToRefs } from "pinia";
import { useCoreStore, _global } from "@/UI/store";
let { wrapperModalVueActive } = storeToRefs(useCoreStore());
const coreStore = useCoreStore();
const providedProps = {
  default: { clearable: true },
  formItem: { required: false },
};
// 在组件挂载时设置初始状态
// onMounted(() => {
//   if (_global.Engine?.state) {
//     coreStore.setEngineState(2);
//   } else {
//     setTimeout(() => {
//       coreStore.setEngineState(2);
//     }, 100);
//   }
// });
const elementType = 2;
let innerShell: boolean;
let autoFeatureDetect: boolean;

const formModel = reactive({
  surfCtrl: {
    autoFeatureDetect: 1,
    innerShell: 0,
    surfaceMesh: {
      meshSize: 6.25,
      meshSizeMin: 3.125,
      wrapperMethod: 1,
    },
  },
});
const GeomSelectTypeOptions = [
  {
    label: "二维单元",
    value: 0,
  },
  {
    label: "组件",
    value: 2,
  },
];
function typeSelect(value: number) {
  coreStore.setEngineState(value);
}
function innerShellChange(value: boolean) {
  formModel.surfCtrl.innerShell = value ? 1 : 0;
}
function autoFeatureDetectChange(value: boolean) {
  formModel.surfCtrl.autoFeatureDetect = value ? 1 : 0;
}
function setWrapperMesh() {
  Toast.loading({ content: "包面网格剖分中", duration: 0 });
  _global.Engine.mesh
    .wrapperMeshCreate(formModel)
    .then((result: any) => {
      // coreStore.setBomInfo(result);
    })
    .finally(() => {
      Toast.close();
      coreStore.setEngineState(0);
    });
}
</script>

<style scoped lang="less">
.title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;

  .title_color {
    width: 4px;
    height: 12px;
    background: #339af0;
    margin-right: 8px;
  }
  .title_content {
    opacity: 1;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    /* content/主要一级primary */
    /* 样式描述：--vxp-content-color-primary */
    color: #212529;
  }
}
</style>
